<template>
  <div class="content">
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品配置查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">商品配置查询</div>
      <div class="orderList">
        <div class="entirety" style="flex-direction: column">
          <div style="display: flex;align-items: center;">
            <!-- 时间 -->
            <div>
              <el-date-picker style='width: 160px;margin-right:15px' value-format="yyyy-MM-dd" v-model="datatime" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
            <!-- 城市 -->
            <div style="margin-left:10px">
              <span>城市</span>
              <el-select style="width: 160px" @change="cityes" v-model="trackCode" placeholder="未选择">
                <el-option v-for="item in trackNodes" :key="item.cityCode" :label="item.cityName" :value="item.cityCode">
                </el-option>
              </el-select>
            </div>
            <!-- 商品 -->
            <div style="margin-left:20px">
              <span>商品</span>
              <el-select style="width: 160px" v-model="goods" placeholder="未选择">
                <el-option v-for="item in goodes" :key="item.goodsCode" :label="item.goodsName" :value="item.goodsCode">
                </el-option>
              </el-select>
            </div>
            <!-- 规格名称 -->
            <!-- <div>
              <span>规格名称</span>
              <el-select style="width: 65%" clearable v-model="platformType" placeholder="未选择">
                <el-option label="IOS" value="IOS"></el-option>
                <el-option label="小程序" value="小程序"></el-option>
                <el-option label="Android" value="Android"></el-option>
              </el-select>
            </div> -->
            <!-- 技能 -->
            <div style="margin-left:20px">
              <span>技能</span>
              <el-input style="width: 160px" :placeholder="skills" disabled clearable></el-input>
            </div>
          </div>
          <div style="margin-top:10px">
            <el-button size="medium" style="background-color:#fd804c;color: #fff;width:75px" @click="isSelect">查询</el-button>
            <el-button size="medium" type="warning" @click.native.prevent="isEmpty">重置</el-button>
            <el-button size="medium" style="background-color:#fd804c;color: #fff;margin-left:20px" @click="clicktoview">点击选择需要查看的商圈</el-button>
          </div>
        </div>
        <!--  商圈配置管理列表栏位-->
        <div class="entirety" v-loading="lists !== '' ? false : true" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-custom-class="loading_color">
          <div class="footer">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column prop="staffCode" label="员工编号">
                <template slot-scope="scope">
                  <div>{{ scope.row.staffCode }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="staffName" label="姓名">
                <template slot-scope="scope">
                  <div> {{ scope.row.staffName }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="" :label="val" v-if="lists<6">
                <template slot-scope="scope">
                  <div>
                    <div v-if="scope.row.businessList[0].haveBusiness==false">
                      <img src="./不归属.png" alt="" style="width:75px;height:40px">
                    </div>
                    <div v-if="scope.row.businessList[0].haveBusiness==true&&scope.row.haveSkill==false">
                      <img src="./不会.png" alt="" style="width:75px;height:40px">
                    </div>
                    <div v-if="scope.row.businessList[0].haveBusiness==true&&scope.row.haveSkill==true">
                      <div v-if="scope.row.staffStatus==true">
                        <span class="ke">已正常配置</span>
                        <!-- <span>{{scope.row.sellTimeInterval}}</span> -->
                      </div>
                      <div v-if="scope.row.staffStatus==false">
                        <span class="ke">已正常配置</span>
                      </div>
                      <!-- <div v-if="scope.row.staffStatus==false">
                        <span class="man">约满</span>
                        <span>{{scope.row.sellTimeInterval}}</span>
                      </div> -->
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="" :label="val1" v-if="lists>1">
                <template slot-scope="scope">
                  <div v-if="val1!=''">
                    <div v-if="scope.row.businessList[1].haveBusiness==false">
                      <img src="./不归属.png" alt="" style="width:75px;height:40px">
                    </div>
                    <div v-if="scope.row.businessList[1].haveBusiness==true&&scope.row.haveSkill==false">
                      <img src="./不会.png" alt="" style="width:75px;height:40px">
                    </div>
                    <div v-if="scope.row.businessList[1].haveBusiness==true&&scope.row.haveSkill==true">
                      <div v-if="scope.row.staffStatus==true">
                        <span class="ke">已正常配置</span>
                        <!-- <span>{{scope.row.sellTimeInterval}}</span> -->
                      </div>
                      <div v-if="scope.row.staffStatus==false">
                        <span class="ke">已正常配置</span>
                      </div>
                      <!-- <div v-if="scope.row.staffStatus==false">
                        <span class="man">约满</span>
                        <span>{{scope.row.sellTimeInterval}}</span>
                      </div> -->
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="" :label="val2" v-if="lists>2">
                <template slot-scope="scope">
                  <div v-if="scope.row.businessList[2].haveBusiness==false">
                    <img src="./不归属.png" alt="" style="width:75px;height:40px">
                  </div>
                  <div v-if="scope.row.businessList[2].haveBusiness==true&&scope.row.haveSkill==false">
                    <img src="./不会.png" alt="" style="width:75px;height:40px">
                  </div>
                  <div v-if="scope.row.businessList[2].haveBusiness==true&&scope.row.haveSkill==true">
                    <div v-if="scope.row.staffStatus==true">
                      <span class="ke">已正常配置</span>
                      <!-- <span>{{scope.row.sellTimeInterval}}</span> -->
                    </div>
                    <div v-if="scope.row.staffStatus==false">
                      <span class="ke">已正常配置</span>
                    </div>
                    <!-- <div v-if="scope.row.staffStatus==false">
                      <span class="man">约满</span>
                      <span>{{scope.row.sellTimeInterval}}</span>
                    </div> -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="" :label="val3" v-if="lists>3">
                <template slot-scope="scope">
                  <div v-if="scope.row.businessList[3].haveBusiness==false">
                    <img src="./不归属.png" alt="" style="width:75px;height:40px">
                  </div>
                  <div v-if="scope.row.businessList[3].haveBusiness==true&&scope.row.haveSkill==false">
                    <img src="./不会.png" alt="" style="width:75px;height:40px">
                  </div>
                  <div v-if="scope.row.businessList[3].haveBusiness==true&&scope.row.haveSkill==true">
                    <div v-if="scope.row.staffStatus==true">
                      <span class="ke">已正常配置</span>
                      <!-- <span>{{scope.row.sellTimeInterval}}</span> -->
                    </div>
                    <div v-if="scope.row.staffStatus==false">
                      <span class="ke">已正常配置</span>
                    </div>
                    <!-- <div v-if="scope.row.staffStatus==false">
                      <span class="man">约满</span>
                      <span>{{scope.row.sellTimeInterval}}</span>
                    </div> -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="" :label="val4" v-if="lists==5">
                <template slot-scope="scope">
                  <div v-if="scope.row.businessList[4].haveBusiness==false">
                    <img src="./不归属.png" alt="" style="width:75px;height:40px">
                  </div>
                  <div v-if="scope.row.businessList[4].haveBusiness==true&&scope.row.haveSkill==false">
                    <img src="./不会.png" alt="" style="width:75px;height:40px">
                  </div>
                  <div v-if="scope.row.businessList[4].haveBusiness==true&&scope.row.haveSkill==true">
                    <div v-if="scope.row.staffStatus==true">
                      <span class="ke">已正常配置</span>
                      <!-- <span>{{scope.row.sellTimeInterval}}</span> -->
                    </div>
                    <div v-if="scope.row.staffStatus==false">
                      <span class="ke">已正常配置</span>
                    </div>
                    <!-- <div v-if="scope.row.staffStatus==false">
                      <span class="man">约满</span>
                      <span>{{scope.row.sellTimeInterval}}</span>
                    </div> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <!-- <div class="pagination">
        <div class="left"></div>
        <div class="right">
          <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :total="total">
          </el-pagination>
        </div>
      </div> -->
      <!-- dialog -->
      <el-dialog title="选择需要查看的商圈" :visible.sync="dialogVisible" width="48%" @closed="down">
        <el-checkbox-group v-model="checkLists">
          <el-checkbox v-for="item in checkList" :key="item.businessAreaCode" :label="item.businessAreaCode" style="margin-bottom:5px;width:82px">{{item.businessAreaName}}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer" style="display: flex;align-items: center;justify-content: space-between;">
          <span style="font-size:14px;color:#ff8989">PS:最多可以同时查看5个商圈</span>
          <div>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="determine(checkLists)">确 定</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data () {
    return {
      val: '',
      val1: '',
      val2: '',
      val3: '',
      val4: '',
      skills: '',
      goods: '',
      lists: '',
      xx: [],
      datatime: moment(new Date()).format("YYYY-MM-DD"),
      platformType: '',
      goodsCode: '',
      trackCode: '',
      skiller: '',
      AreaCodeList: [],
      trackNodes: [],
      tableData: [],
      goodes: [],
      codeList: [],
      checkList: [],
      checkLists: [],
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      dialogVisible: false
    };
  },
  activated () {
    this.city()
  },
  methods: {
    //商品配置查询列表
    savaList () {
      this.$http({
        url: '/staffadmin/staff/goodsSkill/goodsConfigList',
        method: "post",
        data: {
          "businessCode": this.codeList,
          "cityCode": this.citycode,
          "date": this.datatime,
          "goodsCode": this.goodsCode,
          "specifications": ""
        }
      }).then(res => {
        // console.log(res.data, '列表')
        this.skills = res.data.skillName
        this.skiller = res.data.skillName
        this.tableData = res.data.goodsConfigList
        let a = res.data.businessNumberList
        let b = res.data.businessNumberList.length
        this.lists = b
        let xx = [];
        res.data.businessNumberList.forEach(item => {
          xx.push(item.businessCode);
        });
        this.xx = xx;
        // console.log("xdsdsdsdshhhhh,,,,", this.xx);
        if (b == 1) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
        } else if (b == 2) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
        } else if (b == 3) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
          this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
        } else if (b == 4) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
          this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
          this.val3 = a[3].businessName + '商圈：' + a[3].businessNumber + '人可服务'
        } else if (b == 5) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
          this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
          this.val3 = a[3].businessName + '商圈：' + a[3].businessNumber + '人可服务'
          this.val4 = a[4].businessName + '商圈：' + a[4].businessNumber + '人可服务'
        }
        this.total = res.data.goodsConfigList.length
      })
    },
    //商品下拉列表
    gooder () {
      let changeUrl = '/staffadmin/staff/goodsSkill/goodsSelect?'
      this.codeList.forEach((item, index) => {
        if (index == 0) {
          changeUrl += `businessCode=${item}`
        } else {
          changeUrl += `&businessCode=${item}`
        }
      })
      this.$http({
        url: changeUrl,
        method: 'get',
      }).then(res => {
        // console.log(res, '商品下拉列表')
        this.goodes = res.data
        this.goodsCode = res.data[0].goodsCode
        this.goods = res.data[0].goodsCode
        this.savaList()
      })
    },
    //商圈下拉列表
    code () {
      this.$http({
        url: '/staffadmin/staff/goodsSkill/businessSelect',
        method: 'get',
        params: {
          cityCode: this.trackCode
        }
      }).then(res => {
        // console.log(res, '商圈下拉列表')
        this.checkList = res.data
        let lister = res.data.slice(0, 5)
        lister.map(e => this.codeList.push(e.businessAreaCode))
        // console.log(this.checkList, '3123213')
        this.gooder()
      })
    },
    //城市下拉列表
    city () {
      this.$http({
        url: "/staffadmin/staff/goodsSkill/citySelect"
      }).then(res => {
        // console.log(res.data[0].cityCode, '城市下拉列表')
        this.citycode = res.data[0].cityCode
        this.trackCode = res.data[0].cityCode
        this.trackNodes = res.data
        this.code()
      })
    },
    //点击查看
    clicktoview () {
      this.dialogVisible = true;
      this.checkLists = this.xx;
    },
    determine (e) {
      console.log(e.length)
      const checkLists = [];
      checkLists.push(e);
      this.xx = checkLists[0];
      this.AreaCodeList = e
      if (e.length > 5) {
        this.$message.error('错了哦,请选择5个查看的商圈');
      } else {
        this.$http({
          url: '/staffadmin/staff/goodsSkill/goodsConfigList',
          method: "post",
          data: {
            "businessCode": e,
            "cityCode": this.trackCode,
            "date": this.datatime,
            "goodsCode": this.goods,
            "specifications": ""
          }
        }).then(res => {
          console.log(res.data, '列表')
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.skills = res.data.skillName
          this.skiller = res.data.skillName
          this.tableData = res.data.goodsConfigList
          let a = res.data.businessNumberList
          let b = res.data.businessNumberList.length
          this.lists = b
          if (b == 1) {
            this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          } else if (b == 2) {
            this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
            this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
          } else if (b == 3) {
            this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
            this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
            this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
          } else if (b == 4) {
            this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
            this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
            this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
            this.val3 = a[3].businessName + '商圈：' + a[3].businessNumber + '人可服务'
          } else if (b == 5) {
            this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
            this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
            this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
            this.val3 = a[3].businessName + '商圈：' + a[3].businessNumber + '人可服务'
            this.val4 = a[4].businessName + '商圈：' + a[4].businessNumber + '人可服务'
          }
        })
        this.dialogVisible = false
      }
    },
    //城市商圈查询
    cityes () {
      this.AreaCodeList = []
      console.log(this.AreaCodeList.length, 'cityes')
      this.$http({
        url: '/staffadmin/staff/goodsSkill/businessSelect',
        method: 'get',
        params: {
          cityCode: this.trackCode
        }
      }).then(res => {
        console.log(res.data, '123123')
        if (res.data.length == 0) {
          this.$message.error('暂无可查看的商圈');
        } else {
          this.checkList = res.data
          let a = res.data.length
          if (a < 5) {
            let lister = res.data
            lister.map(e => this.AreaCodeList.push(e.businessAreaCode))
          } else {
            let lister = res.data.slice(0, 5)
            lister.map(e => this.AreaCodeList.push(e.businessAreaCode))
          }
        }
      })
    },
    //查询
    isSelect () {
      console.log(this.AreaCodeList.length, 'AreaCodeList')
      console.log(this.codeList.length, 'codeList')
      this.$http({
        url: '/staffadmin/staff/goodsSkill/goodsConfigList',
        method: "post",
        data: {
          "businessCode": this.AreaCodeList == '' ? this.codeList : this.AreaCodeList,
          "cityCode": this.trackCode,
          "date": this.datatime,
          "goodsCode": this.goods,
          "specifications": ""
        }
      }).then(res => {
        console.log(res.data, '列表')
        this.$message({
          message: "查询成功",
          type: "success"
        });
        this.skills = res.data.skillName
        this.skiller = res.data.skillName
        this.tableData = res.data.goodsConfigList
        let a = res.data.businessNumberList
        let b = res.data.businessNumberList.length
        this.lists = b
        let xx = [];
        res.data.businessNumberList.forEach(item => {
          xx.push(item.businessCode);
        });
        this.xx = xx;
        if (b == 1) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
        } else if (b == 2) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
        } else if (b == 3) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
          this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
        } else if (b == 4) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
          this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
          this.val3 = a[3].businessName + '商圈：' + a[3].businessNumber + '人可服务'
        } else if (b == 5) {
          this.val = a[0].businessName + '商圈：' + a[0].businessNumber + '人可服务'
          this.val1 = a[1].businessName + '商圈：' + a[1].businessNumber + '人可服务'
          this.val2 = a[2].businessName + '商圈：' + a[2].businessNumber + '人可服务'
          this.val3 = a[3].businessName + '商圈：' + a[3].businessNumber + '人可服务'
          this.val4 = a[4].businessName + '商圈：' + a[4].businessNumber + '人可服务'
        }
      })
    },
    //重置
    isEmpty () {
      this.datatime = moment(new Date()).format("YYYY-MM-DD")
      this.goods = this.goodsCode
      this.skills = this.skiller
      this.trackCode = this.citycode
      this.AreaCodeList = []
      this.platformType = ''
      this.savaList()
    },
    //关闭事件
    down () {
      this.checkLists = []
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val;
      this.pageIndex = 1;
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val;
    }
  }
};
</script>
<style scoped lang="scss">
.ke {
  background-color: #00b37d;
  color: #fff;
  padding: 4px;
  border-radius: 5px;
}
.man {
  background-color: #ff1f1f;
  color: #fff;
  padding: 4px;
  border-radius: 5px;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.orderList {
  background-color: #ebeef1;
  padding-right: 40px;
  padding-top: 1px;
  padding-bottom: 1px;
  display: block;
  font-size: 16px;
  border-radius: 20px;
  list-style-type: none;
}
.entirety {
  width: 100%;
  margin: 10px;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  padding-left: 10px;
}
/deep/ .el-dialog__body {
  padding: 20px;
}
/deep/ .el-loading-spinner i {
  color: #fc9e76;
}
/deep/ .el-loading-spinner .el-loading-text {
  color: #fc9e76;
  margin: 3px 0;
  font-size: 14px;
}
.footer {
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
.page {
  margin-top: 15px;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.pagination {
  height: 50px;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
</style>
